<template>
  <div>
    <sort></sort>
    <div class="introduces" ref="descT">
      <div class="introduce">
        <p>有害垃圾含有对人体健康有害的重金属、有毒的物质或者对环境造成现实危害或者潜在危害的废弃物。</p>
        <span>这些垃圾一般使用单独回收或填埋处理。</span>
      </div>
    </div>
    <div class="type" v-for="item of type" :key="item.id" ref="descT">
      <div class="type-desc">{{item.desc}}</div>
    </div>
  </div>
</template>

<script>
import Sort from './sort'

export default {
  components: {
    Sort
  },
  data () {
    return {
      type: [{
        id: '001',
        desc: '电池'
      }, {
        id: '002',
        desc: '荧光灯管'
      }, {
        id: '003',
        desc: '灯泡'
      }, {
        id: '004',
        desc: '水银温度计'
      }, {
        id: '005',
        desc: '油漆桶'
      }, {
        id: '006',
        desc: '过期药品'
      }, {
        id: '007',
        desc: '过期化妆品'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global';
.introduces{
  width: 96%;
  margin: 10px auto;
  background: white;
  border-radius: 5px;
  .introduce{
    font-size: 13px;
    line-height: 24px;
    margin: 0 5px;
    p{
      margin-left: 10px;
      height: 90px;
      line-height: 30px;
      font-size: 16px;
      font-weight: 700;
    }
    span{
      padding-left: 2em;
    }
  }
}
.type{
  width: 96%;
  height: 35px;
  line-height: 35px;
  margin: 5px auto;
  background: white;
  border: 1px solid #DCDFE6;
  .type-desc{
    margin-left: 10px;
    font-size: 13px;
  }
}
</style>
